$base: (
  font-family:            (-apple-system, ff-tisa-web-pro-1, ff-tisa-web-pro-2, "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", "微软雅黑", SimSun, STSong, "宋体", STXihei, "华文细黑", "华文宋体", Helvetica, "Segoe UI", Arial, sans-serif, Tahoma),
  font-family-old:        (-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, Tahoma, "Microsoft YaHei", "微软雅黑", SimSun, STSong, "宋体", STXihei, "华文细黑", "华文宋体"),

  font-family-standard:   (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"),
  font-family-monospace:  (SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace),

  /* Added by shines77, 2019-01-28 */

  // body >> code
  font-family-code:       (SFMono-Regular, Menlo, Monaco, Consolas, "Andale Mono", "lucida console", "Liberation Mono", "Courier New", monospace),
  font-size-code:         0.875rem,
  line-height-code:       1.6,

  font-size-root:         16px,
  font-size-root-sm:      14px,

  font-size-xl:           1.2rem,
  font-size-lg:           1rem,
  font-size:              0.875rem,
  font-size-sm:           0.8125rem,
  font-size-xs:           0.75rem,

  font-size-h1-xl:        2.30rem,
  font-size-h2-xl:        2.10rem,
  font-size-h3-xl:        1.9rem,
  font-size-h4-xl:        1.5rem,
  font-size-h5-xl:        1.3rem,
  font-size-h6-xl:        1.1rem,

  font-size-h1-lg:        2.10rem,
  font-size-h2-lg:        1.80rem,
  font-size-h3-lg:        1.46rem,
  font-size-h4-lg:        1.25rem,
  font-size-h5-lg:        1.1rem,
  font-size-h6-lg:        1rem,

  font-size-h1:           1.66rem,
  font-size-h2:           1.44rem,
  font-size-h3:           1.24rem,
  font-size-h4:           1rem,
  font-size-h5:           0.92rem,
  font-size-h6:           0.85rem,

  font-size-h1-sm:        1.6rem,
  font-size-h2-sm:        1.3rem,
  font-size-h3-sm:        1.15rem,
  font-size-h4-sm:        0.95rem,
  font-size-h5-sm:        0.88rem,
  font-size-h6-sm:        0.8rem,

  font-size-h1-xs:        0.90rem,
  font-size-h2-xs:        0.86rem,
  font-size-h3-xs:        0.82rem,
  font-size-h4-xs:        0.78rem,
  font-size-h5-xs:        0.74rem,
  font-size-h6-xs:        0.7rem,

  font-weight:            400,
  font-weight-bold:       700,

  line-height-xl:         2,
  line-height-lg:         1.8,
  line-height:            1.6,
  line-height-sm:         1.4,
  line-height-xs:         1.2,

  spacer:                 0.9375rem,

  border-radius-lg:       .8rem,
  border-radius:          .4rem,
  border-radius-sm:       .2rem,

  /* Added by shines77, 2019-01-28 */

  // header >> logo, size: 28x28
  header-logo-image-width:          1.75rem,
  header-logo-image-height:         1.75rem,

  // header >> navbar
  font-size-navbar-title:           1rem,
  font-size-navbar-title-small:     0.875rem,
  font-size-navbar-text:            1rem,
  font-size-navbar-text-small:      0.875rem,

  // sidebar
  font-size-sidebar-title:          1rem,
  font-size-sidebar-menu:           1rem,
  font-size-sidebar-submenu:        1rem,

  // sidebar :: h1-h6
  font-size-sidebar-h1:             1.125rem,
  font-size-sidebar-h2:             1rem,
  font-size-sidebar-h3:             0.9375rem,
  font-size-sidebar-h4:             0.8750rem,
  font-size-sidebar-h5:             0.8125rem,
  font-size-sidebar-h6:             0.8125rem,

  line-height-sidebar-h1:           1.6,
  line-height-sidebar-h2:           1.4,
  line-height-sidebar-h3:           1.2,
  line-height-sidebar-h4:           1.2,
  line-height-sidebar-h5:           1.0,
  line-height-sidebar-h6:           1.0,

  // aside :: h1-h6
  font-size-aside-h1:               1rem,
  font-size-aside-h2:               0.9375rem,
  font-size-aside-h3:               0.8750rem,
  font-size-aside-h4:               0.8125rem,
  font-size-aside-h5:               0.8125rem,
  font-size-aside-h6:               0.8125rem,

  line-height-aside-h1:             1.6,
  line-height-aside-h2:             1.4,
  line-height-aside-h3:             1.2,
  line-height-aside-h4:             1.2,
  line-height-aside-h5:             1.0,
  line-height-aside-h6:             1.0,

  // categories :: button
  font-size-category-text:          1rem,
  font-size-category-total:         0.5625rem,

  // archives :: button
  font-size-archive-text:           1rem,
  font-size-archive-total:          0.5625rem,

  // tags :: button
  font-size-tag-text:               1rem,
  font-size-tag-total:              0.5625rem,

  // categories
  font-size-category-title:         1rem,
  font-size-category-date:          1rem,

  // archives
  font-size-archive-title:          1rem,
  font-size-archive-year:           1rem,
  font-size-archive-date:           1rem,

  // articles
  font-size-articles-title:         1rem,
  font-size-articles-date:          1rem,
  font-size-articles-content:       1rem,
  font-size-articles-button:        1rem,

  // articles :: item
  font-size-articles-item-meta:         0.9375rem,
  font-size-articles-article_content:   0.875rem,

  // article
  font-size-article-title:          1rem,
  font-size-article-date:           1rem,

  // article >> content
  font-size-article-content-body:   1rem,
  line-height-article-content-body: 1.8,

  // article >> content >> code
  font-size-article-content-code:   0.9375rem,
  line-height-article-content-code: 1.6,

  // article >> content >> pre
  font-size-article-content-pre:    1rem,
  line-height-article-content-pre:  1.8,

  // article >> content >> blockquote
  font-size-article-content-blockquote:    1.125rem,
  line-height-article-content-blockquote:  2.0,

  // article >> emoji
  emoji-image-width:                1.5rem,
  emoji-image-height:               1.5rem,

  // article >> footer
  font-size-article-footer:         0.9375rem,
  line-height-article-footer:       1.6,

  // article >> footer >> license, image size: 88x31
  article-license-image-wdith:      5.5rem,
  article-license-image-height:     1.9375rem,

  // footer
  font-size-footer:                 0.875rem,
  line-height-footer:               1.6,
);

$spacers: (
  0: 0,
  1: map-get($base, spacer) * .25,
  2: map-get($base, spacer) * .5,
  3: map-get($base, spacer),
  4: map-get($base, spacer) * 1.5,
  5: map-get($base, spacer) * 3
);

$z-indexes: (
  header: 65530,
  header-line: 65531,
  actions: 65532,
  mask: 65533,
  sidebar: 65534,
  modal: 65535
);

$layout: (
  header-height:                  5rem,
  header-height-md:               4.5rem,
  header-height-fixed:            4rem,
  header-height-fixed-md:         4.5rem,

  header-title-height-md:         auto,
  header-title-height-fixed-md:   auto,

  header-navbar-height-md:        auto,
  header-navbar-height-fixed-md:  auto,

  content-max-width:              950px,
  sidebar-width:                  250px,
  sidebar-header-height:          3rem,
  aside-width:                    220px
);

//
// |   xs   |   sm   |   md   |   lg   |   xl   |
// | ------ | ------ | ------ | ------ | ------ |
// 0       576      768      992     1200       -
//

$responsive: (
  // Extra small devices (unknown devices, 0px and up)
  xs: 0,
  // Small devices (landscape phones, 576px and up)
  sm: 576px,
  // Medium devices (tablets, 768px and up)
  md: 768px,
  // Large devices (desktops, 992px and up)
  lg: 992px,
  // Extra large devices (large desktops, 1200px and up)
  xl: 1200px
);

$animation: (
  duration:               .4s,
  duration-sm:            .2s,
  timing-function:        ease-in-out
);

$clickable: (
  transition:             all .2s ease-in-out
);

$button-height-xl:        2.8rem;
$button-height-lg:        2.3rem;
$button-height:           1.9rem;
$button-height-sm:        1.5rem;
$button-height-xs:        1.2rem;

$button: (
  padding-y-xl:           ($button-height-xl - map-get($base, font-size-xl)) / 2,
  padding-x-xl:           $button-height-xl / 3,
  padding-y-lg:           ($button-height-lg - map-get($base, font-size-lg)) / 2,
  padding-x-lg:           $button-height-lg / 3,
  padding-y:              ($button-height - map-get($base, font-size)) / 2,
  padding-x:              $button-height / 3,
  padding-y-sm:           ($button-height-sm - map-get($base, font-size-sm)) / 2,
  padding-x-sm:           $button-height-sm / 3,
  padding-y-xs:           ($button-height-xs - map-get($base, font-size-xs)) / 2,
  padding-x-xs:           $button-height-xs / 3,

  pill-radius:            6rem,

  circle-diameter-xl:     $button-height-xl,
  circle-diameter-lg:     $button-height-lg,
  circle-diameter:        $button-height,
  circle-diameter-sm:     $button-height-sm,
  circle-diameter-xs:     $button-height-xs,

  font-weight:            map-get($base, font-weight-bold)
);

$image: (
  width-xl:  20em,
  width-lg:  16rem,
  width:     12rem,
  width-sm:  8rem,
  width-xs:  4rem
);

$menu: (
  horizontal-spacer: 1,
  horizontal-item-vertical-spacer: 1
);